<template>
	<view>
		<view class="station-list">
			<view class="station-card">
				<!-- 	<view class="card-left">
				<image src="../../static/images/dev.png" alt="设备图片" class="device-image"></image>
			</view> -->
				<view class="card-right">
					<text style="display: flex;">
						<text class="device-name">设备名称:</text>
						<text class="text">{{ device.name }}</text>
						<!-- <text class="online-share" style="margin-left: 10upx;" @click.stop="toShare">分享</text> -->
					</text>
					<text><text class="device-name">设备编码:</text>
						{{ device.serialNumber }}</text>
					<text>
						<text class="device-name">激活时间:</text>
						<text class="text">{{ device.powersTime }}</text>
					</text>
				</view>

				<view class="online-list">
					<view v-if="device.onLine === 1 " class="online">在线</view>
					<view v-else-if="device.onLine === 0" class="outline">离线</view>
	
					<view v-if="device.onLine === 1 " class="online-text">
						<image src='../../static/images/online (2).png' style="width: 20px;height: 20px; "></image>
					</view>
					<view v-else-if="device.onLine === 0" class="offline-text">
						<image src='../../static/images/outLine.png' style="width: 20px;height: 20px;"></image>
					</view>
					<view v-if="device.onLine === 1" class="signal-state">优</view>
					<view v-else-if="device.onLine === 0" class="offline-text"></view>
				</view>
			</view>
		</view>
		<uv-tabs :list="list" @click="clickTab" :current="tabNum"></uv-tabs>
		<view class="" v-if="tabNum==0">
			<view class="card-container">
				<view v-for="(device, index) in devices" :key="index" class="station-status" @click="handleFlow(index)">
					<view class="card-left">
						<image :src="device.imageUrl" alt="设备图片" class="data-image"></image>
					</view>
					<view class="data-right">
						<text class="device-name">{{ device.name }}</text>
						<text>{{ device.id }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="" v-if="tabNum==1">
			<view v-if="role=='admin'">
				<!-- <button size="default" type="warn" @click="handleClosePump(2)"
				style="width: 100px; height: 50px;">关阀</button>
			<button size="default" type="warn" @click="handleStopPump(0)"
				style="background:skyblue;width: 100px;">暂停阀门</button>
			<button size="default" type="default" style="background:#00aa00;width: 100px;height: 50px;"
				@click="handleOpenPump(1)">开阀</button> -->
				<view v-if="flow=='flowRole'">
					<uni-list>
						<uni-list-item title="设备名称" :rightText="device.name"></uni-list-item>
						<uni-list-item title="设备编码" :rightText="device.serialNumber"></uni-list-item>
						<uni-list-item title="模组IMEI号" :rightText="device.imei"></uni-list-item>
						<uni-list-item title="流量卡iccid" :rightText="device.iccid"></uni-list-item>
						<uni-list-item title="MCU 唯一id" :rightText="device.mcuId"></uni-list-item>
						<uni-list-item title="硬件板型" :rightText="device.bspType"></uni-list-item>
						<uni-list-item title="模组型号" :rightText="device.lteType"></uni-list-item>
						<uni-list-item title="MCU型号" :rightText="device.mcuType"></uni-list-item>
						<uni-list-item title="MCU固件" :rightText="device.mcuFw"></uni-list-item>
						<uni-list-item title="模组固件" :rightText="device.lteFw"></uni-list-item>
						<uni-list-item title="LCD厂家" :rightText="device.lcdManufacturerName"></uni-list-item>
						<uni-list-item title="语音厂家" :rightText="device.voiceManufacturerName"></uni-list-item>
						<uni-list-item title="FRAM型号" :rightText="device.framModel"></uni-list-item>
						<uni-list-item title="代工厂家" :rightText="device.replaceManufacturerName"></uni-list-item>
					</uni-list>
				</view>
				<view v-else>
					<view class="device-card">
						<!-- 左边图标区域 -->
						<view class="icon">
							<image src="../../static/images/fm.png" mode="aspectFit" class="icon-img"></image>
						</view>
						<!-- 中间设备名称和状态区域 -->
						<view style="margin-right: 10px;">
							<view class="device-info">
								<text style="font-weight: 600;font-size: 18px;">{{ deviceName }}</text>
								<text class="device-status">设备状态：{{ deviceStatus }}</text>
								<!-- <text class="device-status">设备状态：{{ deviceStatus }}</text> -->
							</view>
							<view class="buttons">
								<button @click="handleClosePump(1)" class="btn"
									:class="{'active':btnActive}">开阀</button>
								<button @click="handleClosePump(2)" class="btn">关阀</button>
								<button @click="handleClosePump(0)" class="btn">暂停</button>
							</view>
						</view>
					</view>
					<!-- 设备重启 -->
					<view class="device-card">
						<!-- 左边图标区域 -->
						<view class="icon">
							<image src="../../static/images/reboot.png" mode="aspectFit" class="icon-img"></image>
						</view>
						<!-- 中间设备名称和状态区域 -->
						<view style="margin-right: 10px;">
							<view class="device-info">
								<text style="font-weight: 600;font-size: 18px;">{{ "设备重启" }}</text>
								<!-- <text class="device-status">设备状态：{{ deviceStatus }}</text> -->
							</view>
							<view class="buttons">
								<!-- 重启模组11000,单片机110 -->
								<button @click="reboot({cmd:110,data:{}})" class="btn btn100">重启设备</button>
								<button @click="reboot({cmd:11000,data:{}})" class="btn btn100">重启网络</button>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="" v-if="tabNum==2">
			<view v-if="flow=='flowRole'">
				<uni-table class="table-container" ref="table" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center" width="140px">上报时间</uni-th>
						<uni-th align="center" width="100px">瞬时流量</uni-th>
						<uni-th align="center">累计水量</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, idx) in reportData" :key="idx">
						<uni-td align="center">{{ item.reportTime }}</uni-td>
						<uni-td align="center">{{ item.instantFlow }} m³/h</uni-td>
						<uni-td align="center">{{ item.totalWater }} m³</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view v-else>
				<uni-list>
					<uni-list-item title="设备名称" :rightText="device.name"></uni-list-item>
					<uni-list-item title="设备编码" :rightText="device.serialNumber"></uni-list-item>
					<uni-list-item title="模组IMEI号" :rightText="device.imei"></uni-list-item>
					<uni-list-item title="流量卡iccid" :rightText="device.iccid"></uni-list-item>
					<uni-list-item title="MCU 唯一id" :rightText="device.mcuId"></uni-list-item>
					<uni-list-item title="硬件板型" :rightText="device.bspType"></uni-list-item>
					<uni-list-item title="模组型号" :rightText="device.lteType"></uni-list-item>
					<uni-list-item title="MCU型号" :rightText="device.mcuType"></uni-list-item>
					<uni-list-item title="MCU固件" :rightText="device.mcuFw"></uni-list-item>
					<uni-list-item title="模组固件" :rightText="device.lteFw"></uni-list-item>
					<uni-list-item title="LCD厂家" :rightText="device.lcdManufacturerName"></uni-list-item>
					<uni-list-item title="语音厂家" :rightText="device.voiceManufacturerName"></uni-list-item>
					<uni-list-item title="FRAM型号" :rightText="device.framModel"></uni-list-item>
					<uni-list-item title="代工厂家" :rightText="device.replaceManufacturerName"></uni-list-item>
				</uni-list>
			</view>

		</view>
		<view class="" v-if="tabNum==3">
			<!-- 	<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th align="center">设备使用报文</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in tableData" :key="index">
							<uni-td align="left">
								<view class="name">{{ tableData[index] }}</view>
							</uni-td>
						</uni-tr>
					</uni-table> -->
			<view v-for="(item, index) in tableData" :key="index" class="station-card">
				<view class="card-right">
					<!-- <text><text class="device-name"
													style="margin-right: 5px;">水阀状态:</text>{{ JSON.parse(item).data.workState==0?"关阀":"开阀"}}</text> -->
					<!-- <text><text class="device-name" style="margin-right: 5px;">累计用电量 :</text> -->
					<!-- {{ JSON.parse(item).data.sumEle}} kW</text> -->
					<text><text class="device-name" style="margin-right: 5px;"> 累计用水量 :
							<!-- <text v-if="JSON.parse(item).data.sumFlow==0"></text> -->
						</text v-else>{{ parseFloat(JSON.parse(item).data.sumFlow)/100}} m³</text>
					<!-- <text><text class="device-name" style="margin-right: 5px;">本次用电量 :</text> -->
					<!-- {{ JSON.parse(item).data.curEle}} kW</text> -->
					<text><text class="device-name" style="margin-right: 5px;">本次用水量 :</text>
						{{ JSON.parse(item).data.curFlow }} m³</text>
					<text><text class="device-name" style="margin-right: 5px;">时间 :</text>
						{{ JSON.parse(item).time}}</text>
				</view>
			</view>
		</view>
		<view class="" v-if="tabNum==4">
			<!-- 流量计地址设置 -->
			<view class="device-card">
				<!-- 左边图标区域 -->
				<view class="icon">
					<image src="../../static/images/water.png" mode="aspectFit" class="icon-img"></image>
				</view>
				<!-- 中间设备名称和状态区域 -->
				<view style="margin-right: 10px;">
					<view class="device-info">
						<text style="font-weight: 600;font-size: 18px;">{{ "流量计地址设置" }}</text>
						<!-- <text class="device-status">设备状态：{{ deviceStatus }}</text> -->
						<!-- <text class="device-status">设备状态：{{ deviceStatus }}</text> -->
					</view>
					<view class="buttons">
						<input v-model="addr" class="ipt" @input="validateInput" placeholder="请输入寄存器地址" maxlength="5" />
						<button @click="saveAddr()" class="btn">保存</button>
					</view>
				</view>
			</view>
			<!-- 流量计型号选择 -->
			<view class="device-card">
				<!-- 左边图标区域 -->
				<view class="icon">
					<image src="../../static/images/water.png" mode="aspectFit" class="icon-img"></image>
				</view>
				<!-- 中间设备名称和状态区域 -->
				<view style="margin-right: 10px;">
					<view class="device-info">
						<text style="font-weight: 600;font-size: 18px;">{{ "流量计型号选择" }}</text>
						<!-- <text class="device-status">设备状态：{{ deviceStatus }}</text> -->
						<!-- <text class="device-status">设备状态：{{ deviceStatus }}</text> -->
					</view>
					<view class="buttons">
						<uni-data-select :localdata="flowtypeList" v-model="flowtype" class="select"></uni-data-select>
						<button @click="saveAddrFlowtype()" class="btn">保存</button>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>
<script>
	import {
		getDeviceList,
		controlPump,
		setAddr,
		getDevRecordList,
		getFlowData,
		mqttForwardMsg,getFlowDataZhanlian 
	} from "@/api/system/work.js";
	// import mqtt from "mqtt"
	// import mqtt from 'mqtt/dist/mqtt.js';
	import mqtt from '@/utils/mqtt4.1.0.js';
	// import mqtt from 'mqtt-packet'

	let client;
	export default {
		data() {
			return {
				devExecuteStatus: 2, //初始为执行中
				progress:0,//阀门控制进度
				tabNum: 0,
				list: [{
					name: '数据采集',
				}, {
					name: '远程控制',
				}, {
					name: '基础信息'
				}, {
					name: '使用记录'
				}, {
					name: '参数配置'
				}],
				tabList: [{
						name: '标签一'
					},
					{
						name: '标签二'
					},
					{
						name: '标签三'
					}
				],
				role: "",
				device: {},
				deviceNumber: '',
				activeTab: '使用记录', // 默认选中的 tab
				loading: false,
				tableData: [],
				devices: [{
						id: '- m³/h',
						name: '瞬时流量',
						imageUrl: '/static/images/waterTime.png'
					},
					{
						id: '- m³',
						name: '累计水量',
						imageUrl: '/static/images/waterTotal.png'
					}
				],
				flow: '',
				iconUrl: '', // 这里假设图标放在 static 目录下，你可替换为真实路径或网络图片地址
				deviceName: '水阀',
				deviceStatus: '运行',
				reportData: [{
						reportTime: '2024-12-20 08:00',
						instantFlow: 50.5,
						totalWater: 2000
					},
					{
						reportTime: '2024-12-20 09:00',
						instantFlow: 52.3,
						totalWater: 2100
					},
					{
						reportTime: '2024-12-20 10:00',
						instantFlow: 47.1,
						totalWater: 2200
					},
					{
						reportTime: '2024-12-20 11:00',
						instantFlow: 53.8,
						totalWater: 2300
					},
					{
						reportTime: '2024-12-20 12:00',
						instantFlow: 49.4,
						totalWater: 2400
					},
				],
				btnActive: false,
				addr: "", //流量计寄存器地址
				flowtype: "", //流量计类型
				flowtypeList: [{
						value: 1,
						text: "管段式"
					},
					{
						value: 2,
						text: "卡片式"
					},
				],
			}
		},
		methods: {
			ctrlMQTT(type) {
				uni.showLoading({
					title: '正在操作'
				})
				this.copy = false
				setTimeout(function() {
					if (!this.copy) {
						uni.showToast({
							title: '操作失败请重试！',
							icon: 'none'
						})
						uni.hideLoading()
					}
				}, 60000);
				const instruction = {
					"cmd": 700,
					"data": {
						"status": type
					}
				}
				const strigifyData = JSON.stringify(instruction)
				if (client) {
					client.publish(`hzlink/147/${this.deviceNumber}/cmd/down`, strigifyData, {
						qos: 1,
						retain: false
					}, (err) => {
						if (!err) {

							console.log('消息发送成功');
						} else {
							console.error('消息发送失败:', err);
						}
					});
				}
			},
			connectMQTT() {
				const url = "wss://argi.yinghuainfo.com:8084/wss/mqtt"
				const url1 = "wxs://argi.yinghuainfo.com:8084/wss/mqtt"
				// #ifdef H5
				client = mqtt.connect(
					url, {
						// connectTimeout: 5000,
						// clientId: "S&A1200028&147&1",
						// username: "RF345X",
						// password: "hzLink@RF345X!=12345",
						// clean: false
						wsOptions: {},
						protocolVersion: 5, //MQTT连接协议版本
						clientId: `S&${this.deviceNumber}&147&1`,
						keepalive: 60,
						clean: true,
						username: 'RF345X',
						password: 'hzLink@RF345X!=12345',
						reconnectPeriod: 1000, //1000毫秒，两次重新连接之间的间隔
						connectTimeout: 30 * 1000, //1000毫秒，两次重新连接之间的间隔
						resubscribe: true //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
					}
				);
				console.log('client', client)
				// #endif
				// #ifdef MP-WEIXIN||APP-PLUS
				client = mqtt.connect(
					url1, {
						wsOptions: {},
						protocolVersion: 5, //MQTT连接协议版本
						clientId: `S&${this.deviceNumber}&147&1`,
						keepalive: 60,
						clean: true,
						username: 'RF345X',
						password: 'hzLink@RF345X!=12345',
						reconnectPeriod: 1000, //1000毫秒，两次重新连接之间的间隔
						connectTimeout: 30 * 1000, //1000毫秒，两次重新连接之间的间隔
						resubscribe: true //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
					}
				);
				console.log("小程序端client------", client);
				// #endif
			
				console.log("mqtt----", client);
				client.on('connect', () => {
					console.log(`客户端:${this.deviceNumber}成功连接到mqtt代理！`);
				});

				client.on('error', (error) => {
					console.error(`客户端:${this.deviceNumber}连接错误:${err}!!!`);
					client.end();
				});

				client.on('close', (err) => {
					console.log(`客户端:${this.deviceNumber}连接断开:${err}!!!`);
				});

				return client;

			},
			//瞬时流量
			async getFlowList(code) {
				const res = await getFlowDataZhanlian(code);
				// console.log(res.data.inflow, "瞬时流量")
				if (res.data.inFlow < 0) {
					this.devices[0].id = 0 + " m³/h";
				} else {
					this.devices[0].id = res.data.inFlow + "m³/h";
				}
				if(!res.data.inFlow){
					this.devices[0].id = 0 + " m³/h"
				}
				if(res.data.sumFlow_l && res.data.sumFlow_F){
					this.devices[1].id = parseInt(res.data.sumFlow_l)  + parseFloat(res.data.sumFlow_F)   + " m³"
				}else {
					this.devices[1].id = '0' + " m³"
					
				}
			},
			clickTab(e) {
				this.tabNum = e.index
			},
			setActiveTab(tab) {
				this.activeTab = tab; // 切换 tab
			},
			async getDevDetails(code) {
				uni.showLoading()
				const res = await getDeviceList(code);
				// console.log(res, "设备详情")
				this.device = res.rows[0]

				console.log("设备详情设备详情", this.device);
				uni.hideLoading()
				this.deviceNumber = this.device.serialNumber
				this.getDevRecord()
			},
			//开泵
			// handleOpenPump(type) {
			// 	this.handleControlPump(type)
			// },
			handleClosePump(type) {
				this.handleControlPump(type)
				// this.ctrlMQTT(type)
			},
			// handleStopPump(type) {
			// 	this.handleControlPump(type)
			// },
			async handleControlPump(type) {
				const res = await mqttForwardMsg("hzlink/147/" + this.deviceNumber + "/cmd/down", {
					cmd: 700,
					data: {
						status: type
					}
				})
				if (type == 1 && res.code == "200") {
					this.progress=0;//进度提示
					
					uni.showLoading({
						title: `开阀执行中 ${this.progress}%`,
						mask: true 
					});
					// 更新进度
					const updateProgress = () => {
					 
					
					  if (this.progress == 98) {
					   
					    // uni.hideLoading(); 
						// this.progress=0;//重置状态
					  } else if(this.progress == 100){
						  clearInterval(timer); // 停止累加
						  uni.hideLoading();
						  this.progress=0;//重置状态
					  }
					  
					  else {
					    // 1秒更新进度
					   // 累加 2
					   this.progress += 2;
					   					
					   // 更新加载动画的进度
					   uni.showLoading({
					     title: `开阀执行中 ${this.progress}%`,
					     mask: true
					   });
					  }
					};
					// 更新操作进度的定时器
					const timer = setInterval(updateProgress, 1000);

				} else if (type == 0 && res.code == "200") {
					uni.showToast({
						title: "暂停阀门成功",
						duration: 1500,
						icon: "success",
					});
				} else if (type == 2 && res.code == "200") {
					this.progress=0;//进度提示
					
					uni.showLoading({
						title: `关阀执行中 ${this.progress}%`,
						mask: true 
					});
					// 更新进度
					const updateProgress = () => {
					 
					
					  if (this.progress == 98) {
					   
					    // uni.hideLoading(); 
						// this.progress=0;//重置状态
					  } else if(this.progress == 100){
						  clearInterval(timer); // 停止累加
						  uni.hideLoading();
						  this.progress=0;//重置状态
					  }
					  
					  else {
					    // 1秒更新进度
					   // 累加 2
					   this.progress += 2;
					   					
					   // 更新加载动画的进度
					   uni.showLoading({
					     title: `关阀执行中 ${this.progress}%`,
					     mask: true
					   });
					  }
					};
					// 更新操作进度的定时器
					const timer = setInterval(updateProgress, 1000);

				}
			},
			//限制只能输入整数
			validateInput(event) {
				const value = event.target.value;
				const regex = /^\d*$/; // 正则表达式，匹配整数
				const isValidInput = regex.test(value);

				// 如果输入的不是整数，则清空输入框的最后一个字符（可选）
				if (!isValidInput) {
					this.addr = value.slice(0, -1); // 移除最后一个字符
				}
				this.addr = Number(this.addr);
				if (value > 254) {
					this.addr = 1; // 移除最后一个字符
				}
			},
			//流量计地址设置
			async saveAddr() {
				if (!this.addr) {
					this.$modal.msgError("地址不能为空或0");
					return
				}
				const res = await mqttForwardMsg("hzlink/147/" + this.deviceNumber + "/cmd/down", {
					cmd: 2000,
					data: {
						addr: Number(Number(this.addr))
					}
				})

				if (res.code == "200") {
					uni.showToast({
						title: "设置成功",
						duration: 1500,
						icon: "success",
					});
				}
			},

			//流量计类型设置
			async saveAddrFlowtype() {
				if (this.flowtype == "") {
					this.$modal.msgError("地址不能为空");
					return
				}
				const res = await mqttForwardMsg("hzlink/147/" + this.deviceNumber + "/cmd/down", {
					cmd: 2100,
					data: {
						meter: Number(this.flowtype)
					}
				})
				if (res.code == "200") {
					uni.showToast({
						title: "设置成功",
						duration: 1500,
						icon: "success",
					});
				}
			},
			//重启模组11000,单片机110
			async reboot(msg) {
				const res = await mqttForwardMsg("hzlink/147/" + this.deviceNumber + "/cmd/down",
					msg);
				if (res.code == "200") {
					uni.showToast({
						title: "重启成功",
						duration: 1500,
						icon: "success",
					});
				}
			},
			async getDevRecord() {
				const res = await getDevRecordList(this.deviceNumber);
				// console.log(res.rows, "设备使用记录")
				this.tableData = res.rows.map(item => {
					try {
						// 解析 messageContent 字段为对象
						const parsedMessageContent = item.messageContent;
						return parsedMessageContent; // 返回解析后的对象
					} catch (error) {
						// console.error("JSON解析失败", error);
						return null; // 解析失败时可以返回null，或者你可以根据需要处理错误
					}
				});
				// console.log(this.tableData, "newArray")
				// this.device = res.rows[0]
				// this.deviceNumber = this.device.serialNumber
			},
			handleFlow(index) {
				uni.navigateTo({
					url: `/pages/work/flowStatus?code=${index}`
				});
			},
			disconnectMQTT() {
				if (client) {
					// 移除所有事件监听器
					client.removeAllListeners();
					// 结束并断开MQTT连接
					client.end(() => {
						console.log('MQTT连接已关闭');
					});
					// 将client设置为null以防止多次调用disconnectMQTT导致的问题
					client = null;
				}
			}
		},
		onUnload() {
			if (client) {
				// 移除所有事件监听器
				client.removeAllListeners();
				// 结束并断开MQTT连接
				client.end(() => {
					console.log('MQTT连接已关闭');
				});
				// 将client设置为null以防止多次调用disconnectMQTT导致的问题
				client = null;
			}
		},
		async onLoad(options) {
			//确保首先拿到设备编号
			await this.getDevDetails(options.code);
			//初始化mqtt客户端并连接到消息代理
			this.connectMQTT()
			//订阅一些必要的主题
			//1.下发指令给设备，设备回应主题
			const cmdReply = 'hzlink/147/' + this.deviceNumber + '/cmd/reply'
			// 订阅主题
			client.subscribe(cmdReply, (err) => {
				if (!err) {
					console.log(`客户端${this.deviceNumber}订阅主题${cmdReply}成功！`);
				}
			});
			// 处理接收到的消息
			client.on('message', (topic, message) => {
					// 消息打印在控制台
					console.log(`客户端${this.deviceNumber}收到主题为${topic}的消息:${message.toString()}`);
					//处理设备阀门控制回应
					const reply = JSON.parse(message)
					if (reply.type === 'devCmdAck') {
						//执行完成
						if (reply.data.ackExe == 1) {
							this.devExecuteStatus = 1;
							// 隐藏加载动画
							uni.hideLoading();
							uni.showToast({
								title: "执行成功！",
								duration: 1500,
								icon: "success",
							});
							//更新阀门状态、
							//如果是开阀操作
							if(reply.data.ackVal==1){
								this.deviceStatus = '开阀'
								this.progress=100;
							}
							//如果是关阀操作
							else if(reply.data.ackVal==2){
								this.deviceStatus = '关阀'
								this.progress=100;
							}
							//如果是停止操作
							else if(reply.data.ackVal==3){
								this.deviceStatus = '暂停'
								// this.progress=100;
							}

						}
						//正在执行
						else if (reply.data.ackExe == 2) {
							this.devExecuteStatus=2
							setTimeout(() => {
								if (this.devExecuteStatus == 2) {
									uni.hideLoading();
									uni.showToast({
										title: "执行失败！请重试！",
										duration: 1500,
										icon: "error",
									});
									
									this.progress=100;
									console.log('等待超时'+this.progress
									)
								}
							}, 70000)//等待70秒期间没收到设备执行完毕消息就是执行失败了。
						}

			
					//执行失败
					else if (reply.data.ackExe == 3) {
						this.devExecuteStatus=3
						uni.showToast({
							title: "执行失败！请重试！",
							duration: 1500,
							icon: "error",
						});
					}
				}
			});


		// console.log(options.role, "options.code")

		this.getFlowList(options.code)
		this.role = this.$store.state.user.roles[0]
		this.flow = options.role
		if (this.flow == "flowRole") {
			this.list = [{
				name: '数据采集',
			}, {
				name: '基础数据',
			}, {
				name: '上报记录'
			}, ]
		}
	}
	}
</script>

<style lang="scss">
	.btns {
		margin-top: 20px;
		display: flex;
		justify-content: space-around;

		button {
			width: 150px;
			color: #fff;
		}
	}

	.tabs-container {
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
		border: 1px solid #ddd;
		border-radius: 8px;
	}

	.tabs {
		display: flex;
		border-bottom: 2px solid #ddd;
	}

	.tab {
		flex: 1;
		padding: 10px;
		text-align: center;
		cursor: pointer;
		font-weight: bold;
		transition: background-color 0.1s;
	}

	.tab.active {
		background-color: #2ec226;
		color: white;
	}

	.tab:hover {
		background-color: #2ec226;
	}

	.tab-content {
		// padding: 20px;
		height: 80px;
	}

	.name {
		word-wrap: break-word;
		/* 自动换行，避免内容溢出 */
		word-break: break-all;
		/* 强制在任何地方断开，适用于长单词 */
		overflow: hidden;
		/* 隐藏溢出部分 */
		text-overflow: ellipsis;
		/* 可选: 如果内容超出容器，显示省略号 */
		white-space: normal;
		/* 允许换行 */
	}

	.station-list {
		display: flex;
		flex-direction: column;
		padding: 16px;
		row-gap: 10px;

	}

	.station-card {
		display: flex;
		padding: 10px;
		/* 设置为flex布局 */
		border-radius: 12px;
		background-color: #ffffff;
		color: #333;
		/* 设置固定高度 */
		box-shadow: 0 0 16px #ccc;
		column-gap: 10px;
		margin: 20upx;
		height: auto;
		padding-bottom: 22upx;
	}

	.card-container {
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		gap: 10px;
		/* 卡片间距 */
		justify-content: space-between;
		/* 两列布局 */
		margin: 8px;
	}

	.station-status {
		width: calc(50% - 8px);
		/* 每个卡片占一半的宽度，并有8px的间距 */
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 8px;
		overflow: hidden;
		display: flex;
	}

	.card-left {
		width: 80px;
		/* 左侧固定宽度 */
		display: flex;
		justify-content: center;
		align-items: center;

		.device-image {
			width: inherit;
			/* 图片宽度填充左侧区域 */
			height: 80px;
			object-fit: cover;
			/* 保持图片比例 */
			border-radius: 8px;
		}
	}

	.card-right {
		flex: 1;
		/* 右侧自适应宽度 */
		display: flex;
		flex-direction: column;
		/* 设置竖直方向排列 */
		justify-content: space-between;
		column-gap: 10px;
		color: #666;

		.online-share {
			background-color: #1fcf2b;
			border-radius: 20%;
			color: #fff;
			padding: 6upx;
		}

		.text {
			display: inline-block;
			word-break: break-all;
			white-space: normal;
		}
	}

	.data-image {
		width: 100%;
		height: 70px;
		object-fit: cover;
		/* 保持图片比例 */
		border-radius: 8px;
		padding: 10px
	}

	.online-list {
		display: flex;
		row-gap: 10upx;
		justify-content: center;
		align-items: center;
		justify-items: center;
		flex-direction: column;

		.online {
			background-color: #1fcf2b;
			border-radius: 20%;
			color: #fff;
			padding: 6upx;
		}

		.outline {
			background-color: #e7811b;
			border-radius: 20%;
			color: #fff;
			padding: 6upx;
		}
	}

	.data-right {
		flex: 1;
		padding-left: 4px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		row-gap: 10upx;
	}

	.device-name {
		font-size: 14px;
		font-weight: bold;
		color: #666;
		margin-right: 5px;
	}

	.signal-state {
		background-color: #1fcf2b;
		border-radius: 50%;
		padding: 6upx 10upx;
		color: #fff;

	}

	.device-card {
		display: flex;
		border-radius: 5px;
		margin: 10px;
		// overflow: hidden;
		background-color: #fff;
		height: 100px;
	}

	/* 左边图标区域 */
	.icon {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 图标样式 */
	.icon-img {
		width: 60px;
		height: 60px;
	}

	.device-info {
		flex: 2;
		display: flex;
		padding-top: 15px;
		// flex-direction: column;
		row-gap: 10px;
		justify-content: space-between;
	}

	.buttons {
		flex: 1;
		display: flex;
		flex-direction: row; // 将按钮排列方向改为横向（一行）
		justify-content: space-evenly;
		align-items: center;
		margin-top: 10px
	}

	/* 按钮通用样式 */
	.ipt {
		width: 165px;
		height: 40px;
		border: #DDD solid 1px;
		border-radius: 3px;
		cursor: pointer;
		margin-right: 5px;
		padding: 0 10px;
	}

	.btn {
		width: 80px;
		height: 40px;
		line-height: 40px;
		border: none;
		border-radius: 3px;
		cursor: pointer;
		margin-right: 5px;
	}

	.btn100 {
		width: 120px;
	}

	.active {
		background-color: green;
		color: #fff;
	}

	/* 按钮悬停效果 */
	.btn:hover {
		background-color: #ccc;
	}

	.select {
		width: 165px;
		margin-right: 5px;
	}
</style>